.create_code {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  height: 100%;

  :deep(.el-form) {
    display: flex;
    column-gap: 48px;

    .el-form-item {
      display: flex;

      .el-form-item__label {
        height: 28px;
        line-height: 28px;
      }

      .el-form-item__content {
        flex-direction: column;
        align-items: flex-start;

        .el-input {
          width: 180px;
        }

        .el-radio-group {
          column-gap: 12px;

          .el-radio {
            margin: 0;
            height: 28px;
            column-gap: 3px;

            .el-radio__label {
              height: 28px;
              line-height: 28px;
              padding: 0;
            }
          }
        }

        .num {
          height: 28px;
          line-height: 28px;
          color: $primaryColor;
        }

        .el-form-item__error {
          margin: 3px 0 0 0;
          padding: 0;
        }
      }
    }
  }

  .table_container {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: calc(100% - 40px);

    .title {
      display: flex;
      justify-content: space-between;
      background-color: rgba(0, 0, 0, 0.04);
      box-sizing: border-box;
      padding: 8px;
      border: 1px solid #dcdfe6;

      .right {
        color: $primaryColor;
      }
    }

    .table {
      max-height: calc(100% - 46px);
    }
  }
}

.cards {
  .input_name {
    display: flex;
    align-items: center;

    .input {
      width: 170px;
    }
  }
  .card {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mar {
      margin-right: 20px;
    }

    .type {
      margin-left: 15px;
    }

    .number {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;

      .num {
        font-size: 24px;
        color: #007cff;
      }
    }
  }

  .list {
    padding: 0 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.125);

    .name {
      font-weight: bold;
      height: 40px;
      line-height: 40px;
    }

    .text {
      color: $primaryColor;
    }
  }

  .table {
    .tbody {
      // display: block;
      // width: 100%;
      // max-height: 400px !important;
      // overflow: auto !important;
    }

    // table {
    //   width: 100%;
    //   border-collapse: collapse;

    //   tr {
    //     display: grid;
    //     grid-template-columns: 2fr 2fr 1fr 1fr 1fr;

    //     td {
    //       padding-bottom: 10px;
    //     }

    //     th {
    //       padding: 10px 0;
    //       text-align: left;

    //       .fa-asterisk {
    //         color: #ff5833a6;
    //         font-size: 2px;
    //         transform: scale(0.5);
    //         position: relative;
    //         top: -2px;
    //         margin-right: 4px;
    //       }

    //       .btn_add {
    //         padding: 0 4px;
    //         height: 2vh;
    //         color: $primaryColor;
    //         border-radius: 2px;

    //         &:hover {
    //           border-color: $primaryColor;
    //           color: #fff;
    //           background-color: $primaryColor;
    //         }
    //       }
    //     }
    //   }

    //   .part {
    //     width: 150px;
    //   }

    //   .num-inp {
    //     width: 60px;
    //   }

    //   .delete {
    //     color: #f56c6c;
    //     cursor: pointer;
    //   }

    //   .btn {
    //     margin-top: 10px;
    //     height: 28px;
    //     line-height: 26px;
    //     padding: 0 6px;
    //     color: #ffffff;
    //     font-weight: 400;
    //     border-radius: 2px;
    //     border: 1px solid #e5e5e5;
    //     font-size: 14px;
    //     background-color: #007cff;
    //     border-color: #007cff;
    //     cursor: pointer;
    //   }
    // }
  }
}

.btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 25px;
  margin-bottom: 10px;
}

.btn_save {
  width: 60px;
}

.btn_cancel {
  width: 60px;
}
